import {Component, OnInit} from '@angular/core';
import {Path} from "../../../../portal/admin/admin-breadcrumb/breadcrumb";
import {PageSubject} from "../../../../util/page-subject";
import {DataOverviewService} from "./data-overview.service";
import {MsgResult} from "../../../../models/msg-result";
import {ResponseUtil} from "../../../../util/response-util";
import {MsgConstants} from "../../../../constants/constants";
import {OneDialogService} from "../../../../widgets/one-dialog/one-dialog.service";


declare var $;
declare var echarts;
declare var moment;


@Component({
  selector: 'app-data-overview',
  templateUrl: './data-overview.component.html',
  styleUrls: ['./data-overview.component.css']
})
export class DataOverviewComponent implements OnInit {
  timeLineNum;
  chainObj;allPieObj;weatherObj;chartList;areaQualityObj;
  constructor(
    private pageSubject : PageSubject,
    private overviewService : DataOverviewService,
    private responseUtil :ResponseUtil,
    private dialogService: OneDialogService,
  ) { }

  /**
   * 面包屑导航
   */
  pushPage() {
    let path = new Path("数据研判", "");
    this.pageSubject.pushPage("统计概览", "", path);
  }

  ngOnInit() {
    this.timeLineNum = moment().subtract(1,"d").format("DD");
    this.pushPage();
    this.allPieObj = {endTime:moment().subtract(1,"d").format("YYYY-MM-DD")};
    this.allPieChartData(this.allPieObj);
    this.chainObj = {endTime:moment().subtract(1,"d").format("YYYY-MM-DD"),type:"TB"};
    this.chainChartData(this.chainObj);
    this.weatherObj = {endTime:moment().subtract(1,"d").format("YYYY-MM-DD")};
    this.weatherChartData(this.weatherObj);
    this.areaQualityObj = {endTime:moment().subtract(1,"d").format("YYYY-MM-DD"),factor:"AQI"};
    this.areaAirQualityData(this.areaQualityObj);

    this.initTimeLine();
    this.initButtonStyle();
    this.initButtonEvent();
    this.weatherChartEvent();
  }
  //初始化样式事件
  initButtonStyle(){
    $("a").click(function(e){
      e.preventDefault();
      $(this).css("text-decoration","none");
    });
    //    标签按钮点击事件
    $(".btnTab .btn").click(function(){
      $(this).addClass("active").siblings(".active").removeClass("active");
    });
    //按钮点击事件
    $(".btn-group .btn").click(function(){
      $(this).addClass("active").siblings(".active").removeClass("active");
    });
    //改变input样式
    $('input').iCheck({
      checkboxClass: 'icheckbox_minimal-green',
      radioClass: 'iradio_minimal-green',
      increaseArea: '20%' // optional
    });
    //内容高度
    // $(".content-wrapper").css("height",$(window.innerHeight)[0]+"px");
    let dropDownInitHtml = " ";
    $(".one-dropdown-menu input:checked").each(function(){
      let text = $(this).parent().parent().text();
      let id = $(this).data("type");
      dropDownInitHtml += "<span id='"+id+"'>"+text+"</span>";
    });
    $(".one-dropdown-text").append(dropDownInitHtml);
    $(".one-dropdown-text").click(function () {
      if($(this).hasClass("active")){
        $(this).removeClass("active").next().hide();
      }else{
        $(this).addClass("active").next().show();
      }
    });
    $("body").click(function(e){
      let target = $(e.target);
      if(target.closest(".dropdown").length == 0){
        $(".one-dropdown-menu").hide();
        $(".one-dropdown-text").removeClass("active");
      }
    });
  };
  //初始化点击事件
  initButtonEvent(){
      let nowYear = moment().format("YYYY");
      let nowMonth = moment().format("M");
      let nowDate = moment().subtract(1,"d").format("DD");
      //年input
      $("#statisticYear").val(nowYear).attr("max",nowYear).change(function(e){
        let chooseYear = $(e.target).val();
        if(chooseYear==nowYear){
          $("#statisticMonth").attr("max",nowMonth).val(nowMonth);
        }else{
          $("#statisticMonth").attr("max",12);
        }
        let chooseMonth = $("#statisticMonth").val();
        let data = [];
        let chooseDate = moment(chooseYear+"-"+chooseMonth, "YYYY-M");
        console.log(chooseDate+"123");
        let timeLineDay = chooseDate.daysInMonth();
        timeLineDay = chooseMonth == nowMonth && chooseYear ==nowYear?nowDate:timeLineDay;
        for(let i=1;i<=timeLineDay;i++){
          //data.push(moment(chooseYear+chooseMonth+i,"YYYYMDD").format("YYYY-MM-DD"));
          data.push(chooseDate.format("YYYY-MM")+"-"+i);
        }
        this.TimeLine(data);
      }.bind(this));
      //月input
      $("#statisticMonth").val(nowMonth).attr("max",nowMonth).change(function(e){
        let chooseYear = $("#statisticYear").val();
        let chooseMonth = $(e.target).val();
        console.log(chooseYear+"-"+chooseMonth);
        if(chooseYear==nowYear){
          $(this).attr("max",nowMonth);
        }else{
          $(this).attr("max",12);
        }
        let data = [];
        let chooseDate = moment(chooseYear+"-"+chooseMonth, "YYYY-M");
        let timeLineDay = chooseDate.daysInMonth();
        timeLineDay = chooseMonth == nowMonth && chooseYear ==nowYear?nowDate:timeLineDay;
        for(let i=1;i<=timeLineDay;i++){
          data.push(chooseDate.format("YYYY-MM")+"-"+i);
        }
        this.TimeLine(data);
      }.bind(this));

    //同比/环比按钮点击事件
    $(".chainBtn").on("click",".btn",function(e){
      let chooseDay = this.timeLineNum>=10?this.timeLineNum:"0"+this.timeLineNum;
      let chooseYear =moment($("#statisticYear").val(),"YYYY").format("YYYY");
      let chooseMonth = moment($("#statisticMonth").val(),"M").format("MM");
      let type = $(e.target).attr("id");
      let chainObj = {"endTime":chooseYear+"-"+chooseMonth+"-"+chooseDay,"type":type};
      this.chainChartData(chainObj);
    }.bind(this));

    //点击查询按钮
    $(".search").click(function(){
      let chooseDay = this.timeLineNum>=10?this.timeLineNum:"0"+this.timeLineNum;
      let chooseYear =moment($("#statisticYear").val(),"YYYY").format("YYYY");
      let chooseMonth = moment($("#statisticMonth").val(),"M").format("MM");
      //    修改饼图
      let pieObj = {"format":"json","endTime":chooseYear+"-"+chooseMonth+"-"+chooseDay};
      this.allPieChartData(pieObj);
      //    修改同比/环比
      let chainObjType = $(".chainBtn .btn.active").attr("id");
      let chainObj = {"format":"json","endTime":chooseYear+"-"+chooseMonth+"-"+chooseDay,"type":chainObjType};
      // this.chainObj.type = $(".chainBtn .btn.active").attr("id");
      this.chainChartData(chainObj);
      //   修改天气质量
      let weatherObj = {"format":"json","endTime":chooseYear+"-"+chooseMonth+"-"+chooseDay};
      this.weatherChartData(weatherObj);
      //    修改辖区空气质量
      let factor = $(".factorBtn .btn.active").attr("id");
      let areaAirObj = {"format":"json","endTime":chooseYear+"-"+chooseMonth+"-"+chooseDay,"factor":factor};
      this.areaAirQualityData(areaAirObj);
    }.bind(this));
    //辖区空气质量分析按钮点击
    $(".factorBtn").on("click",".btn",function(e){
      let chooseDay = this.timeLineNum>=10?this.timeLineNum:"0"+this.timeLineNum;
      let chooseYear =moment($("#statisticYear").val(),"YYYY").format("YYYY");
      let chooseMonth = moment($("#statisticMonth").val(),"M").format("MM");
      let factor= $(e.target).attr("id");
      let areaAirObj = {"format":"json","endTime":chooseYear+"-"+chooseMonth+"-"+chooseDay,"factor":factor};
      this.areaAirQualityData(areaAirObj);
    }.bind(this));

  };

  /*
   * 同环比
   */
  chainChart(chartList){
    let chainChart = echarts.init(document.getElementById('chainChart'));
    let chainOption = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data:chartList.legend
      },
      xAxis: {
        type: 'category',
        nameGap:"20",
        nameLocation:"start",
        splitLine: {
          show: false
        },
        axisTick: {
          alignWithLabel:true
        },

        data:chartList.pollutionList
      },
      yAxis: [
        {
          name: "浓度值",
          type: 'value'
        },{
          type: 'value',
          name: '升降趋势比',
          splitLine: {
            show: false
          }
        }
      ],
      series: [{
        name: chartList.legend[0],
        type: 'bar',
        smooth: true,
        barWidth:20,
        data: chartList.dataObj.nowDataList,
        itemStyle:{
          normal:{
            color:"#6FD0FE"
          }
        }
      },{
        name: chartList.legend[1],
        type: 'bar',
        smooth: true,
        barWidth:20,
        data: chartList.dataObj.lastDataList,
        itemStyle:{
          normal:{
            color:"#FF7442"
          }
        },
        barGap:0
      },{
        name:"同比",
        yAxisIndex:1,
        type: 'line',
        symbol:"roundRect",
        symbolSize:6,
        smooth: true,
        data: [],
        itemStyle:{
          normal:{
            color:"#F4ADEC"
          }
        }
      }]
    };
    let dataList = {};
    $.each(chartList.dataObj.contrastRatioDataList,function(i,data){
      let dataTextColor = " ";
      dataTextColor = data >0?"#B80000":"#00B405";
      let dataObj = {
        value:data,
        label:{
          normal:{
            show:true,
            formatter:"{c}%",
            textStyle:{
              color:dataTextColor
            }
          }
        }
      };
      chainOption.series[2].data.push(dataObj);
    });
    chainChart.setOption(chainOption);
  }
//  同环比数据
  chainChartData(obj){
   this.overviewService.getHuanData(obj).subscribe(
     result => this.responseUtil.success(result,this.processResult),
     message => this.responseUtil.error(message)
   );
 }
  private processResult = (result: MsgResult) =>{
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      this.regioCodezTree(result.data);
    }
    if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  }
  private regioCodezTree(data){
    if(data.pollutionList == null){
      $("#chainChart").html("暂无数据");
    }else{
    let type= $(".chainBtn .btn.active").attr("id");
    // let legend : Array<string> =[];
    if(type == "TB"){
      data.legend = [$("#statisticYear").val()+"年",(parseInt($("#statisticYear").val())-1)+"年"];
    }else if(type == "HB"){
      let nowMonthChain = moment($("#statisticMonth").val(),"M").format("M");
     let lastMonthChain = moment($("#statisticMonth").val(),"M").subtract(1,"M").format("M");
      data.legend = [nowMonthChain+"月",lastMonthChain+"月"];
    };
   console.log("同比/环比数据请求成功");
   console.log(data);
    this.chainChart(data);
  }
}

  /*
   *饼状图
   */
  allPieChart(dataLists){
    //优良天数
    let fineChart =  echarts.init(document.getElementById('fineChart'));
    let fineOption = {
      title : {
        text: '优良天数',
        x:'center',
        y:"bottom"
      },
      label:{
        normal:{
          textStyle:{
            color:"#333"
          }
        },
        emphasis:{
          textStyle:{
            color:"#333"
          }
        }
      },
      labelLine:{
        normal:{
          lineStyle:{
            color:"#333"
          }
        }
      },
      tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      calculable : true,
      series : [
        {
          name:'优良天数(天)',
          type:'pie',
          radius : [0, 75],
          hoverAnimation:false,
          data:[

          ],
          itemStyle:{
            normal:{
              label:{
                show: true,
                formatter: '{b}\n{c}天'
              },
              labelLine :{show:true}
            }
          }
        }
      ]
    };
    $.each(dataLists.fineDayData.nameList,function(i,name){
      let obj = {
        value:dataLists.fineDayData.dataList[i],
        name:name,
        itemStyle:{
          normal:{
            color:this.fineDayColor(name)
          }
        }
      };
      fineOption.series[0].data.push(obj);
    }.bind(this));
    fineChart.setOption(fineOption);
// 首要污染物
    let firstChart =  echarts.init(document.getElementById('firstChart'));
    let firstOption = {
      title : {
        text: '首要污染物',
        x:'center',
        y:"bottom"
      },
      tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      label:{
        normal:{
          textStyle:{
            color:"#333"
          }
        },
        emphasis:{
          textStyle:{
            color:"#333"
          }
        }
      },
      labelLine:{
        normal:{
          lineStyle:{
            color:"#333"
          }
        }
      },
      calculable : true,
      series : [
        {
          name:'首要污染物(次)',
          type:'pie',
          roseType:true,
          radius : [0, 75],
          hoverAnimation:false,
          data:[

          ],
          itemStyle:{
            normal:{
              label:{
                show: true,
                formatter: '{b}\n{c}次'
              },
              labelLine :{show:true}
            }
          }
        }
      ]
    };
    $.each(dataLists.pollutionData.pollutionNameList,function(i,name){
      let obj = {
        value:dataLists.pollutionData.pollutionDataList[i],
        name:name,
        itemStyle:{
          normal:{
            color:this.factorColor(name)
          }
        }
      };
      firstOption.series[0].data.push(obj);
    }.bind(this));
    firstChart.setOption(firstOption);
//    污染物分担率
    let pollutantChart =  echarts.init(document.getElementById('pollutantChart'));
    let pollutantOption = {
      label:{
        normal:{
          textStyle:{
            color:"#333"
          }
        },
        emphasis:{
          textStyle:{
            color:"#333"
          }
        }
      },
      labelLine:{
        normal:{
          lineStyle:{
            color:"#333"
          }
        }
      },
      title : {
        text: '污染物分担率',
        x:'center',
        y:"bottom"
      },
      tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      calculable : true,
      series : [
        {
          name:'污染物分担率(%)',
          type:'pie',
          roseType:true,
          radius : [0, 75],
          hoverAnimation:false,
          data:[
          ],
          itemStyle:{
            normal:{
              label:{
                show: true,
                formatter: '{b}\n{d}%'
              },
              labelLine :{show:true}
            }
          }
        }
      ]
    };
    $.each(dataLists.shareRateData.pollutionNameList,function(i,name){
      let obj = {
        value:dataLists.shareRateData.shareRateList[i],
        name:name,
        itemStyle:{
          normal:{
            color:this.polluteColor(name)
          }
        }
      };
      pollutantOption.series[0].data.push(obj);
    }.bind(this));
    pollutantChart.setOption(pollutantOption);
  }
  fineDayColor(text){
    let color = text == "中度污染"?"#F12F1C":text == "严重污染"?"#9C0D71":text == "轻度污染"?"#F5A623":text == "优"?"#61D800":text == "良"?"#CCB21A":text == "重度污染"?"#630445":"";
    return color;
  }
  factorColor(text){
    let color = text == "O3"?"#8AB732":text == "CO"?"#0D8919":text == "NO2"?"#57A740":text == "PM2.5"?"#ABDE76":text == "PM10"?"#17A855":text == "SO2"?"#76B740":"";
    return color;
  }
  polluteColor(text){
    let color = text == "O3"?"#9096A4":text == "CO"?"#CACACA":text == "NO2"?"#A1A1A1":text == "PM2.5"?"#7C88A1":text == "PM10"?"#787B81":text == "SO2"?"#404040":"";
    return color;
  }
//所有饼状图数据
  allPieChartData(obj){
    this.overviewService.getAllPiepicData(obj).subscribe(
      result => this.responseUtil.success(result,this.allPiepicDataResult),
      message => this.responseUtil.error(message)
    );
  }
  private allPiepicDataResult = (result: MsgResult) =>{
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      this.allPiepicDataTree(result.data);
    }
    if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  }
  private allPiepicDataTree(data){
    if(data == null){
      $(".pieChartContainer").find("[id$=Chart]").html("暂无数据");
    }else{
      console.log("所有饼状图");
      console.log(data);
      this.allPieChart(data);
    }
  }
  /*
   *天气空气质量趋势
   */
  weatherChart(chartList){
    let chartLegend = chartList.nameList.air.concat(chartList.nameList.weather,chartList.nameList.wind);
    console.log(chartLegend);
    let weatherChart = echarts.init(document.getElementById('weatherChart'));
    let weatherOption = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data:chartLegend
      },
      xAxis: {
        type: 'category',
        nameGap:"20",
        name: "日期",
        nameLocation:"start",
        splitLine: {
          show: false
        },
        boundaryGap: false,
        data: chartList.timeList
      },
      yAxis:[ {
        name: "指数",
        type: 'value'
      }, {
        name: "天气",
        type: 'value',
        splitLine: {
          show: false
        }
      }],
      series: []
    };
    if(chartList.dataList.air.length!=0){
      $.each(chartList.dataList.air,function(i,data){
        let airObj = {
          name: chartList.nameList.air[i],
          type: 'line',
          smooth: true,
          symbolSize:6,
          data: data
        };
        weatherOption.series.push(airObj)
      });
    }
    if(chartList.dataList.weather.length!=0){
      $.each(chartList.dataList.weather,function(i,data){
        let weatherObj = {
          name: chartList.nameList.weather[i],
          type: 'line',
          smooth: true,
          yAxisIndex:1,
          symbolSize:6,
          data: data
        };
        weatherOption.series.push(weatherObj)
      });
    }
    if(chartList.dataList.wind.power){
      let dataList = [];
      $.each(chartList.dataList.wind.power,function(i,data){
        let obj = {
          value:data,
          symbol:"emptyarrow",
          symbolRotate:-(chartList.dataList.wind.rotate[i])
        };
        dataList.push(obj);
      });
      let weatherObj = {
        name: chartList.nameList.wind,
        type: 'line',
        smooth: true,
        yAxisIndex:1,
        symbolSize:12,
        data:dataList
      };
      weatherOption.series.push(weatherObj)
    }
    console.log(weatherOption);
    weatherChart.setOption(weatherOption);
  }
  chooseFactorData(chartData){
    this.chartList = {};
    this.chartList.timeList = chartData.timeList;
    this.chartList.nameList = {};
    this.chartList.dataList = {};
    this.chartList.nameList.air = [];
    this.chartList.nameList.wind = [];
    this.chartList.nameList.weather = [];
    this.chartList.dataList.air = [];
    this.chartList.dataList.wind = {};
    this.chartList.dataList.weather = [];
    $(".one-dropdown-text >span").each(function(i,list){
      let text = $.trim($(list).text());
      let factorType = this.weatherNum(text);
      if(factorType.type == "air"){
        this.chartList.nameList.air.push(text);
        this.chartList.dataList.air.push(chartData.dataList[factorType.num]);
      }else if(factorType.type == "weather"){
        this.chartList.nameList.weather.push(text);
        this.chartList.dataList.weather.push(chartData.dataList[factorType.num]);
      }else if(factorType.type == "wind"){
        this.chartList.nameList.wind.push(text);
        // chartList.dataList.wind.power=[];
        // chartList.dataList.wind.rotate=[];
        this.chartList.dataList.wind.power =chartData.dataList[factorType.num];
        this.chartList.dataList.wind.rotate=chartData.dataList[factorType.num+1];
      }
    }.bind(this));
    console.log(this.chartList);
    this.weatherChart(this.chartList);
  }
  weatherNum(text){
    let num = text=="温度"?0:text=="相对湿度"?1:text=="风力风向"?2:text=="PM10"?4:text=="PM2.5"?5:text=="SO2"?6:text=="NO2"?7:text=="CO"?8:text=="O3"?9:"";
    let type = text=="温度"?"weather":text=="相对湿度"?"weather":text=="风力风向"?"wind":text=="PM10"?"air":text=="PM2.5"?"air":text=="SO2"?"air":text=="NO2"?"air":text=="CO"?"air":text=="O3"?"air":"";
    return {num:num,type:type}
  }
  //天气空气质量趋势点击
  weatherChartEvent(){
    let chooseDay = this.timeLineNum>=10?this.timeLineNum:"0"+this.timeLineNum;
    let chooseYear =moment($("#statisticYear").val(),"YYYY").format("YYYY");
    let chooseMonth = moment($("#statisticMonth").val(),"M").format("MM");
    let chainObj = {"endTime":chooseYear+"-"+chooseMonth+"-"+chooseDay};
    this.weatherChartData(chainObj);
    $(".one-dropdown-menu input").on("ifChecked",function(e){
      let chooseDay = this.timeLineNum>=10?this.timeLineNum:"0"+this.timeLineNum;
      let chooseYear =moment($("#statisticYear").val(),"YYYY").format("YYYY");
      let chooseMonth = moment($("#statisticMonth").val(),"M").format("MM");
      let chainObj = {"endTime":chooseYear+"-"+chooseMonth+"-"+chooseDay};
      let text = $(e.target).parent().parent().text();
      let id = $(e.target).data("type");
      let chooseHtml = "<span id='"+id+"'>"+text+"</span>";
      $(".one-dropdown-text").append(chooseHtml);
      this.weatherChartData(chainObj);
    }.bind(this)).on("ifUnchecked",function(e){
      let chooseDay = this.timeLineNum>=10?this.timeLineNum:"0"+this.timeLineNum;
      let chooseYear =moment($("#statisticYear").val(),"YYYY").format("YYYY");
      let chooseMonth = moment($("#statisticMonth").val(),"M").format("MM");
      let chainObj = {"endTime":chooseYear+"-"+chooseMonth+"-"+chooseDay};
      let chooseId = $(e.target).data("type");
      $(".one-dropdown-text>span").each(function(){
        let id = $(this).attr("id");
        if(chooseId == id){
          $(this).remove();
        }
      });
      this.weatherChartData(chainObj);
      if($(".one-dropdown-menu .checked").length<=2){
        $(e.target).parent().parent().parent().siblings().find(".checked input").iCheck('disable');
      }else {
        $(e.target).parent().parent().parent().parent().find(".icheckbox_minimal-green input").iCheck('enable');
      }
    }.bind(this)).on("ifClicked",function(){
      if($(".one-dropdown-menu .checked").length>0){
        $(this).parent().parent().parent().parent().find("input").iCheck('enable');
      }
    });
  }


//    天气空气质量趋势数据
  weatherChartData(obj){
  // this.obj = {};
  // this.obj.endTime = "2017-05-26";
  this.overviewService.getWeatherChartData(obj).subscribe(
    result => this.responseUtil.success(result,this.weatherChartDataResult),
    message => this.responseUtil.error(message)
  );
}
  private weatherChartDataResult = (result: MsgResult) =>{
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      this.weatherChartDataTree(result.data);
    }
    if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  }
  private weatherChartDataTree(data){
    console.log("天气空气质量趋势");
    console.log(data);
    this.chooseFactorData(data);

  }

  /*
   * 辖区空气质量分析
   */
  areaAirQuality(chartList){
    //浓度值
    let concentrationChart = echarts.init(document.getElementById('concentrationChart'));
    let concentrationOption = {
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        nameGap:"20",
        name: "日期",
        nameLocation:"start",
        splitLine: {
          show: false
        },
        axisTick: {
          alignWithLabel:true
        },
        data: chartList.areaList
      },
      yAxis: {
        name: "浓度值",
        type: 'value',
        splitLine: {
          show: false
        }
      },
      series: [{
        name: "浓度值",
        type: 'bar',
        symbolSize:6,
        barWidth:"20",
        smooth: true,
        itemStyle:{
          normal:{
            color:"#83B9D7"
          }
        },
        data: [],
        markLine: {
          data: [
            {
              type: 'average',
              name: '平均值',
              lineStyle:{
                normal:{
                  color:"#48ab5d"
                }
              }
            }
          ]
        }
      }]
    };
    $.each(chartList.airData.IAQIList,function(i,data){
      let dataColor = "";
      dataColor = (data>0&&data<=50)?"#61D800":(data>50&&data<=100)?"#CCB21A":(data>100&&data<=150)?"#F5A623":(data>150&&data<=200)?"#F12F1C":(data>200&&data<=300)?"#9C0D71":(data>300)?"#630445":"#2EC7C9";
      let concentrationData = {
        value:chartList.airData.airList[i],
        itemStyle:{
          normal:{
            color:dataColor
          }
        }
      };
      concentrationOption.series[0].data.push(concentrationData);
    });
    concentrationChart.setOption(concentrationOption);
    //同比
    let tChainChart = echarts.init(document.getElementById('tChainChart'));
    let tChainOption = {
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        nameGap:"20",
        name: "日期",
        nameLocation:"start",
        splitLine: {
          show: false
        },
        axisTick: {
          alignWithLabel:true
        },
        data: chartList.areaList
      },
      yAxis: {
        name: "同比",
        type: 'value',
        splitLine: {
          show: false
        }
      },
      series: [{
        name: '同比',
        type: 'bar',
        symbolSize:6,
        barWidth:"20",
        smooth: true,
        itemStyle:{
          normal:{
            color:"#81C8AC"
          }
        },
        data: [],
        markLine: {
          data: [
            {
              type: 'average',
              name: '平均值',
              lineStyle:{
                normal:{
                  color:"#48ab5d"
                }
              }
            }
          ]
        }
      }]
    };
    $.each(chartList.yoyData.yoyList,function(i,data){
      let dataColor = "";
      dataColor = data>0?"#b80000":"#00b405";
      let tChainData = {
        value:data,
        itemStyle:{
          normal:{
            color:dataColor
          }
        }
      };
      tChainOption.series[0].data.push(tChainData);
    });
    tChainChart.setOption(tChainOption);
    //环比
    let hChainChart = echarts.init(document.getElementById('hChainChart'));
    let hChainChartOption = {
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        nameGap:"20",
        name: "日期",
        nameLocation:"start",
        splitLine: {
          show: false
        },
        axisTick: {
          alignWithLabel:true
        },
        data: chartList.areaList
      },
      yAxis: {
        name: "环比",
        type: 'value',
        splitLine: {
          show: false
        }
      },
      series: [{
        name: '环比',
        type: 'bar',
        symbolSize:6,
        barWidth:"20",
        smooth: true,
        itemStyle:{
          normal:{
            color:"#81C8AC"
          }
        },
        data: [],
        markLine: {
          data: [
            {
              type: 'average',
              name: '平均值',
              lineStyle:{
                normal:{
                  color:"#48ab5d"
                }
              }
            }
          ]
        }
      }]
    };
    $.each(chartList.momData.momList,function(i,data){
      let dataColor = "";
      dataColor = data>0?"#b80000":"#00b405";
      let hChainData = {
        value:data,
        itemStyle:{
          normal:{
            color:dataColor
          }
        }
      };
      hChainChartOption.series[0].data.push(hChainData);
    });
    hChainChart.setOption(hChainChartOption);
    echarts.connect([hChainChart, tChainChart,concentrationChart]);  //联动高亮
  }

//辖区空气质量分析图表函数
  areaAirQualityData(obj){
    this.overviewService.getAreaQualityData(obj).subscribe(
      result => this.responseUtil.success(result,this.areaQualityDataResult),
      message => this.responseUtil.error(message)
    );
  }
  private areaQualityDataResult = (result: MsgResult) =>{
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      this.areaQualityDataTree(result.data.resultObj);
    }
    if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  }
  private areaQualityDataTree(data){
    console.log(1)
    console.log(data)
    if(data == null){
      $(".areaDataChart").find("[id$=Chart]").html("暂无数据");
    }else{
      console.log("辖区空气质量分析图表函数");
      console.log(data);
      this.areaAirQuality(data);
    }

  }

  /*
   *时间轴
   */
  TimeLine(timeLineDataA){
    // console.log(timeLineDataA);
    let timeLine =  echarts.init(document.getElementById('timeLine'));
    let timeLineOption = {
      baseOption: {
        timeline: {
          axisType: 'category',
          top:0,
          left:8,
          right:12,
          currentIndex:moment().subtract(1,"d").format("DD")-1,//parseInt(timeLineDataA.length-1)
          data: timeLineDataA,
          label: {
            formatter : function(s) {
              return ((new Date(s)).getDate());
            }
          },
          lineStyle:{
            width:8,
            color:"#D7D7D7"
          },
          symbolSize:14,
          controlStyle:{
            show:false
          },
          checkpointStyle:{
            color:"#48ab5d",
            shadowColor:"#fff",
            borderWidth:0
          },
          itemStyle:{
            normal:{
              color:"#aaa4a4"
            },
            emphasis:{
              color:"rgb(72,171,93)"
            }
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            center: ['20%', '50%'],
            radius: '0'
          }
        ]
      },
      options: [
        {
          series: [
            {data: [

            ]}
          ]
        }
      ]
    };
    timeLine.setOption(timeLineOption);
    //时间轴点击改变事件
    timeLine.on("timelinechanged",function(data){
      this.timeLineNum = data.currentIndex+1;
      let chooseDay = this.timeLineNum>=10?this.timeLineNum:"0"+this.timeLineNum;
      let chooseYear =moment($("#statisticYear").val(),"YYYY").format("YYYY");
      let chooseMonth = moment($("#statisticMonth").val(),"M").format("MM");
      // alert(chooseYear+"-"+chooseMonth+"-"+chooseDay)
      //    修改饼图
      let pieObj = {"format":"json","endTime":chooseYear+"-"+chooseMonth+"-"+chooseDay};
      this.allPieChartData(pieObj);
      //    修改同比/环比
      let chainObjType = $(".chainBtn .btn.active").attr("id");
      let chainObj = {"format":"json","endTime":chooseYear+"-"+chooseMonth+"-"+chooseDay,"type":chainObjType};
      // this.chainObj.type = $(".chainBtn .btn.active").attr("id");
      this.chainChartData(chainObj);
      //   修改天气质量
      let weatherObj = {"format":"json","endTime":chooseYear+"-"+chooseMonth+"-"+chooseDay};
      this.weatherChartData(weatherObj);
      //    修改辖区空气质量
      let factor = $(".factorBtn .btn.active").attr("id");
      let areaAirObj = {"format":"json","endTime":chooseYear+"-"+chooseMonth+"-"+chooseDay,"factor":factor};

      this.areaAirQualityData(areaAirObj);
    }.bind(this));
  };
  initTimeLine(){
  let timeLineData = [];
  for(let i=1;i<=moment().subtract(1,"d").format("DD");i++){
    timeLineData.push(moment().format("YYYY-M")+"-"+i);
  };
  // console.log(timeLineData)
  this.TimeLine(timeLineData);
}

}
